<template>
	<view class="body" style="min-height: 1400rpx;">
		<!-- <view class="header">我的订单</view> -->
		<view style="height: 10rpx;"></view>
		<view v-show="is_empty" style="margin-top: 200rpx;">
			<image style="width: 750rpx;" :src="'https://s1.ax1x.com/2022/08/01/vAIOr4.png'" mode="aspectFit"> </image>
		</view>
		<uni-card v-for="(item,index) in orders" :title="'预约类型:'+getSubscribeType(item.type)">
			<view>
				<uni-row>
					<uni-col>
						<text class="title-font">预约时间: </text>
						<uni-dateformat :date="item.date_time" style="font-size: 26rpx;"></uni-dateformat>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col>
						<text class="title-font">发起时间: </text>
						<uni-dateformat :date="item.create_time" style="font-size: 26rpx;"></uni-dateformat>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col>
						<text class="title-font">联系人: </text>
						<text style="font-size: 26rpx;">{{item.name}}</text>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col>
						<text class="title-font">联系电话: </text>
						<text style="font-size: 26rpx;">{{item.phone}}</text>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col>
						<text class="title-font">预约状态: </text>
						<uni-tag :type="getStatusTagType(item.status)" :text="getStatusTagText(item.status)"></uni-tag>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col>
						<view v-if="status==0||status==1">
							<button class="btn" @click="cancle(item._id)">取消预约</button>
						</view>
					</uni-col>
				</uni-row>
			</view>
		</uni-card>
	</view>
</template>

<script>
	import myOrderList from "@/components/myOrderList/myOrderList.vue"

	import {
		GetOrderObj
	} from '@/common/utils/getCurrentUserOrder.js'
	const getOrderObj = new GetOrderObj()

	const db = uniCloud.database()
	const dbCmd = db.command



	export default {
		data() {
			return {
				orders: [],
				orderGoodsList: [],
				is_empty: true,
				index: 0,
				status: 0,
				refresh: true
			}
		},
		onLoad(option) {
			this.status = parseInt(option.index)
			this.index = parseInt(option.index)
			this.getOrderGoodsList()
		},
		methods: {
			convert(money) {
				return {
					integer: Math.floor(money / 100),
					point: money % 100
				}
			},
			async updateOrder(id) {
				let flag = true
				let res = await db.collection('uni-id-base-order').where({
					_id: id
				}).update({
					status: 3,
					is_handle: false,
				}).catch(e => {
					flag = false
				})

				return flag
			},
			getOrderGoodsList() {
				this.is_empty = false
				this.orders = this.$store.state.orders
				this.orderGoodsList = this.$store.state.orderGoodsList
				console.log(this.orderGoodsList[0]);
				if (this.orders.length == 0) {
					this.is_empty = true
				}
			},
			//取消  修改订单状态 is_handle status
			cancle(id) {
				uni.showModal({
					title: '确定取消吗',
					editable: false,
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: '加载中...',
								mask: true,
								icon: 'loading'
							})
							let flag = this.updateOrder(id)
							if (flag) {
								setTimeout(() => {
									uni.hideToast()
									this.reload()
								}, 3000)
							} else {
								uni.showToast({
									title: '取消失败，请重试',
									icon: "warnning",
									duration: 800
								})
							}
						}
					}
				})
			},
			async reload() {
				await getOrderObj.getOrderGoodsList(this.index)


				uni.hideToast();
				uni.redirectTo({
					url: '/pages/order/myorder/myorder?index=' + this.index
				})

			},
			getSubscribeType(type) {
				switch (type) {
					case 0:
						return '看车预约'
					case 1:
						return '保养预约'
					case 2:
						return '维修预约'
					default:
						break;
				}
			},
			getStatusTagType(status) {
				if (status == 0) {
					return 'warning'
				} else if (status == 1) {
					return 'success'
				} else if (status == 2) {
					return 'error'
				} else if (status == 3) {
					return 'info'
				} else if (status == 4) {
					return 'info'
				}
			},
			getStatusTagText(status) {
				switch (status) {
					case 0:
						return '预约中'
					case 1:
						return '预约成功'
					case 2:
						return '预约失败'
					case 3:
						return '已取消'
					case 4:
						return '已使用'
					default:
						break;
				}
			}

		},
		components: {
			myOrderList
		}
	}
</script>

<style>
	.btn {
		min-width: 140rpx;
		height: 60rpx;
		border: gainsboro 1px solid;
		color: #a3a3a3;
		font-size: 28rpx;
		border-radius: 18rpx;
		line-height: 60rpx;
	}

	.is_empty {
		width: 710rpx;
		height: 600rpx;
	}

	.title-font {
		font-size: Tahoma;
	}

	.yuan-font {
		color: #FF5000;
		font-size: 32rpx;
	}


	.header {
		width: 750rpx;
		height: 105rpx;
		background-color: #f9f9fc;
		line-height: 105rpx;
		text-align: center;
		font-weight: bold;
		font-size: 18px;
		margin-bottom: 10rpx;
	}
</style>